﻿@inherits NantCom.NancyBlack.Modules.ContentSystem.NancyBlackRazorViewBase

@if (this.RenderContext.Context.Request.Url.HostName == "localhost") // dev machine
{
    <script src="/Content/Scripts/ckeditor/ckeditor.js"></script>
}
else
{
    <script src="//cdn.ckeditor.com/4.4.5.1/full/ckeditor.js"></script>
}

<script>
    var GLOBAL_CONTENT = @this.Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Content));
</script>

<div id="editorPanel"
     ng-module="ncbEditor"
     ng-class="{ in : show % 2 != 0 }"
     ng-controller="PanelController as ctrl">
    <div>
        <a class="toggle"
           ng-click="show = show + 1"
           ng-init="show = 0"
           href="#">
            <i class="fa fa-arrow-circle-o-left"
               ng-class="{ 'fa-rotate-180' : show % 2 == 0}"></i>
        </a>

        <div class="form-group">
            <i class="fa fa-cog fa-2x"
               ng-class=" { 'fa-spin' : isBusy }">
            </i>
            <div class="pull-right">
                <button class="btn btn-success"
                        ng-disabled="activeEditor != null"
                        ng-click="ctrl.save()">
                    <i class="fa fa-cloud-upload"></i>
                </button>

                <button class="btn btn-primary"
                        ng-hide="activeEditor != null"
                        ng-click="ctrl.enableEditArea()">
                    <i class="fa fa-edit"></i>
                </button>

                <button class="btn btn-success"
                        ng-show="activeEditor != null"
                        ng-click="ctrl.commitEditArea( false )">
                    <i class="fa fa-save"></i>
                </button>

                <button class="btn btn-danger"
                        ng-show="activeEditor != null"
                        ng-click="ctrl.commitEditArea( true )">
                    <i class="fa fa-undo"></i>
                </button>

                <button class="btn btn-primary">
                    <i class="fa fa-dot-circle-o"></i>
                </button>
            </div>
        </div>

        <div class="form-group"
             style="margin-top: 10px">
            <input type="text"
                   class="form-control input-lg"
                   ng-model="object.Title"
                   placeholder="Page Title"/>
        </div>

        <div class="form-group">
            <label>Layout</label>
            <select class="form-control"
                    ng-model="object.Layout">
                <option ng-repeat="layout in AvailableLayouts">{{layout}}</option>
            </select>
        </div>

        <div class="form-group">
            <label>SEO</label>
            <input type="text"
                   class="form-control"
                   ng-model="object.SEOKeywords"
                   placeholder="SEO Keywords" />
        </div>

        <div class="form-group">
            <textarea type="text"
                   class="form-control"
                   ng-model="object.SEODescription"
                   rows="5"
                   placeholder="SEO Description">
            </textarea>
        </div>

        <hr/>

        <div class="form-group">
            <label>Publishing</label>
            <input type="text"
                   class="form-control"
                   ng-model="object.PublishFrom"
                   placeholder="From Date" />
            <input type="text"
                   class="form-control"
                   ng-model="object.PublishTo"
                   placeholder="To Date" />
        </div>
    </div>
</div>



<script src="/Content/Views/Editor/editor.js"></script>